<template>
  <div class="careitembox">
    <div class="careitemscroll">
      <!-- <ul class="notelistother f-clear" v-if="flag1">
              <li class="commonbox" v-for="(item, index) in caredata" :key="index" :class="bglist[index]">
                <p>{{item}}</p>
              </li>
          </ul> -->
      <!-- <div id="ScrollebleItems"></div> -->
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in caredata"
                      :key="index">
          <div class="careitem"
               :class="[item=='防跌倒'?'carebg1':item=='防压疮'?'carebg2':item=='防导管脱落'?'carebg3':item=='防坠床'?'carebg4':'carebg5']">

          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
// import $ from 'jquery'
export default {
  name: 'careitem',
  props: ['caredata'],
  data () {
    return {
      flag1: true,
      // carelist: ['防跌倒', '防压疮', '防导管脱落', '防坠床', '病危并重'],
      bglist: [
        'type01',
        'type02',
        'type03',
        'type04',
        'type05'
      ],
      swiperOption: {
        slidesPerView: 4,
        // autoplay: true,
        slidesPerGroup: 3
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/indexcommon.css'
.careitembox
  .careitemscroll
    height 2.11rem
    margin-bottom 0.09rem
    position relative
    z-index 99
    overflow hidden
    .scrollerUL
      white-space nowrap
      position relative
      z-index 99
      padding-bottom 0.09rem
      text-align left
      li
        width 1.46rem
        height 2.11rem
        background-size 100% 100%
        // box-shadow: 0px 10px 38.54px 2.46px rgba(25, 142, 190, 0.29);
        text-align left
        box-sizing border-box
        padding 0.52rem 0.1rem
        display inline-block
        margin-right 0.2rem
        position relative
        &:last-child
          margin-right 0
        span
          font-size 0.24rem
          color #e3f1ef
          display block
          position absolute
          // top: 0.3rem;
          // left: 0.18rem;
          margin 0.3rem 0 0 0.18rem
        p
          font-size 0.24rem
          color #e3f1ef
          text-align center
          line-height 0.6rem
      .type01
        background-image url('../../../static/images/indexone/Note.png')
      .type02
        background-image url('../../../static/images/indexone/Note.png')
      .type03
        background-image url('../../../static/images/indexone/Note.png')
      .type04
        background-image url('../../../static/images/indexone/Note.png')
      .type05
        background-image url('../../../static/images/indexone/Note.png')
    .notelistother
      position relative
      z-index 99
      padding-bottom 0.09rem
      text-align left
      li
        width 1.65rem
        height 2.11rem
        background-size 100% 100%
        background-image url('../../../static/images/indexone/Note.png')
        text-align left
        box-sizing border-box
        padding 0.3rem 0.15rem
        display inline-block
        margin-right 0.11rem
        position relative
        &:last-child
          margin-right 0
        span
          font-size 0.24rem
          color #e3f1ef
          display block
          position absolute
          // top: 0.3rem;
          // left: 0.18rem;
          margin 0.3rem 0 0 0.18rem
        p
          font-size 0.24rem
          color #e3f1ef
          line-height 0.3rem
.swiper-slide
  .careitem
    width 1.4rem
    height 2.11rem
    background-size 100% 100%
    border-radius 0.2rem
    // background-image: url('../../../static/images/indexone/Note.png')
    text-align center
    box-sizing border-box
    // padding: 0.3rem 0.15rem;
    display table-cell
    vertical-align middle
    margin-right 0.11rem
    position relative
    p
      font-size 0.24rem
      color #ffe38f
      text-align center
      line-height 0.3rem
      width 0.25rem
      margin 0 auto
      font-weight bold
      text-indent -1000px
  .bgyellow
    background-color #fbb812
  .bggreen
    background-color #2ec3b1
  .bgblue
    background-color #35a2c6
  .bgdefault
    background-image url('../../../static/images/indexone/Note.png')
  .carebg1
    background-image url('../../../static/images/indexone/carebg01.png')
  .carebg2
    background-image url('../../../static/images/indexone/carebg02.png')
  .carebg3
    background-image url('../../../static/images/indexone/carebg03.png')
  .carebg4
    background-image url('../../../static/images/indexone/carebg04.png')
  .carebg5
    background-image url('../../../static/images/indexone/carebg05.png')
</style>
